<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl - loaders - Draco loader</title>
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="page-wrapper">
        <h1>Open a draco compressed file (.drc):</h1>
        <div>
            <input type="file" id="fileInput">
        </div>
    </div>
    <div>
        <pre id="decoderType"><pre>
    </div>
    <div>
        <pre id="fileDisplayArea"><pre>
    </div>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
    <script src="DRACOLoader.js"></script>
    <script src="geometry_helper.js"></script>
    <script>
      'use strict';

      // Configure decoder and create loader.
      THREE.DRACOLoader.setDecoderPath( '../' );
      var dracoLoader = new THREE.DRACOLoader();

      // (Optional) Pre-fetch decoder source files.
      THREE.DRACOLoader.getDecoderModule();

      var camera, cameraTarget, scene, renderer;

      function init() {
        var container = document.createElement('div');
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15);
        camera.position.set(3, 0.15, 3);
        cameraTarget = new THREE.Vector3(0, 0, 0);

        scene = new THREE.Scene();
        scene.fog = new THREE.Fog(0x72645b, 2, 15);

        // Ground
        var plane = new THREE.Mesh(
            new THREE.PlaneBufferGeometry(40, 40),
            new THREE.MeshPhongMaterial({color: 0x999999, specular: 0x101010}));
        plane.rotation.x = -Math.PI/2;
        plane.position.y = -0.5;
        scene.add(plane);
        plane.receiveShadow = true;

        // Lights
        scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
        addShadowedLight(1, 1, 1, 0xffffff, 1.35);
        addShadowedLight(0.5, 1, -1, 0xffaa00, 1);

        // renderer
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor(scene.fog.color);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);
        window.addEventListener('resize', onWindowResize, false);
      }

      function addShadowedLight(x, y, z, color, intensity) {
        var directionalLight = new THREE.DirectionalLight(color, intensity);
        directionalLight.position.set(x, y, z);
        scene.add(directionalLight);
      }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      }

      function animate() {
        requestAnimationFrame(animate);
        render();
      }

      function render() {
        var timer = Date.now() * 0.0005;
        camera.position.x = Math.sin(timer) * 2.5;
        camera.position.z = Math.cos(timer) * 2.5;
        camera.lookAt(cameraTarget);
        renderer.render(scene, camera);
      }

      window.onload = function() {
        var fileInput = document.getElementById('fileInput');
        var fileDisplayArea = document.getElementById('fileDisplayArea');

        fileInput.onclick = function() {
          this.value = '';
        }

        fileInput.addEventListener('change', function(e) {
          var file = fileInput.files[0];

          var reader = new FileReader();
          reader.onload = function(e) {
            // Enable logging to console output.
            dracoLoader.setVerbosity(1);

            // To use triangle strips use:
            //   dracoLoader.setDrawMode(THREE.TriangleStripDrawMode);
            dracoLoader.setDrawMode(THREE.TrianglesDrawMode);

            // Skip dequantization of the position attribute. It will be done on the GPU.
            dracoLoader.setSkipDequantization('position', true);
            dracoLoader.decodeDracoFile(reader.result, function(bufferGeometry) {
              if (dracoLoader.decode_time !== undefined) {
                fileDisplayArea.innerText = 'Decode time = ' + dracoLoader.decode_time + '\n' +
                                            'Import time = ' + dracoLoader.import_time;
              }
              var material = new THREE.MeshStandardMaterial({vertexColors: THREE.VertexColors});
              // If the position attribute is quantized, modify the material to perform
              // dequantization on the GPU.
              if (bufferGeometry.attributes['position'].isQuantized) {
                setDequantizationForMaterial(material, bufferGeometry);
              }

              var geometry;
              // Point cloud does not have face indices.
              if (bufferGeometry.index == null) {
                geometry = new THREE.Points(bufferGeometry, material);
              } else {
                if (bufferGeometry.attributes.normal === undefined) {
                  var geometryHelper = new GeometryHelper();
                  geometryHelper.computeVertexNormals(bufferGeometry);
                }
                geometry = new THREE.Mesh(bufferGeometry, material);
                geometry.drawMode = dracoLoader.drawMode;
              }
              // Compute range of the geometry coordinates for proper rendering.
              bufferGeometry.computeBoundingBox();
              if (bufferGeometry.attributes['position'].isQuantized) {
                // If the geometry is quantized, transform the bounding box to the dequantized
                // coordinates.
                var posAttribute = bufferGeometry.attributes['position'];
                var normConstant =
                    posAttribute.maxRange / (1 << posAttribute.numQuantizationBits);
                var minPos = posAttribute.minValues;
                bufferGeometry.boundingBox.max.x =
                    minPos[0] + bufferGeometry.boundingBox.max.x * normConstant;
                bufferGeometry.boundingBox.max.y =
                    minPos[1] + bufferGeometry.boundingBox.max.y * normConstant;
                bufferGeometry.boundingBox.max.z =
                    minPos[2] + bufferGeometry.boundingBox.max.z * normConstant;
                bufferGeometry.boundingBox.min.x =
                    minPos[0] + bufferGeometry.boundingBox.min.x * normConstant;
                bufferGeometry.boundingBox.min.y =
                    minPos[1] + bufferGeometry.boundingBox.min.y * normConstant;
                bufferGeometry.boundingBox.min.z =
                    minPos[2] + bufferGeometry.boundingBox.min.z * normConstant;
              }
              var sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x;
              var sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y;
              var sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z;
              var diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ);
              var scale = 1.0 / diagonalSize;
              var midX =
                (bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2;
              var midY =
                (bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2;
              var midZ =
                (bufferGeometry.boundingBox.min.z + bufferGeometry.boundingBox.max.z) / 2;

              geometry.scale.multiplyScalar(scale);
              geometry.position.x = -midX * scale;
              geometry.position.y = -midY * scale;
              geometry.position.z = -midZ * scale;
              geometry.castShadow = true;
              geometry.receiveShadow = true;

              var selectedObject = scene.getObjectByName("my_mesh");
              scene.remove(selectedObject);
              geometry.name = "my_mesh";
              scene.add(geometry);
            });
          }
          reader.readAsArrayBuffer(file);
        });

        init();
        animate();
      }

      function setDequantizationForMaterial(material, bufferGeometry) {
        material.onBeforeCompile = function(shader) {
          // Add uniform variables needed for dequantization.
          var posAttribute = bufferGeometry.attributes['position'];
          shader.uniforms.normConstant =
            { value: posAttribute.maxRange / (1 << posAttribute.numQuantizationBits) };
          shader.uniforms.minPos = { value: posAttribute.minValues };

          shader.vertexShader = 'uniform float maxRange;\n' +
                                'uniform float normConstant;\n' +
                                'uniform vec3 minPos;\n' +
                                shader.vertexShader;
          shader.vertexShader = shader.vertexShader.replace(
              '#include <begin_vertex>',
              'vec3 transformed = minPos + position * normConstant;'
          );
        }
      }
    </script>
</body>
</html>
